<!DOCTYPE html>
<html>
    <head>
        <meta charset= "utf-8">
        <title>mydemo</title>
        <style type= "text/css">
            body, #outer input, #outer button {margin: 0; padding: 0;}
            html, body {height: 100%;}
            #outer {width: 500px; margin: 30px auto;font: 0.6em "微软雅黑";}
            #outer input, #outer button {margin: 10px; display: inline-block;}
            
        </style>
        <script type= "text/javascript">
        window.onload = function() {
            var oBtn = document.getElementsByTagName("button")[0];
            var oInput = document.getElementsByTagName("input")[0];
            var oSum = document.getElementById("sum");
            oInput.onkeyup = function() {
                this.value = this.value.replace(/[^(\d)|(,)]/,"");
            }
            oBtn.onclick = function() {
                var sum = 0;
                var oInput = document.getElementsByTagName("input")[0].value.split(",");
                for (var i in oInput) {
                    sum += parseInt(oInput[i]);
                }
                oSum.innerHTML = sum;
            }
            
        }
        </script>
    </head>
    <body>
        <div id= "outer">
            <input type="text" value= "1,2,3" />输入数字求和，数字之间用半角","号分隔<br>
            <button>求和</button>
            <strong id="sum"></strong>
        </div>
    </body>
</html>